<template>
    <div class="platform">
        <my-tag title="设计师管理" :showSortImg="false"></my-tag>
        <div class="platform-box">
            <el-form ref="designerRef" :model="editPlannerForm" :rules="rules" label-position="top" label-width="left"
                class="demo-ruleForm platform-formList">
                <div class="form-left">
                    <el-form-item label="绑定用户" prop="nickName">
                        <el-select v-model="editPlannerForm.nickName" filterable @change="designerNameChange"
                            placeholder="请输入或选择绑定用户" size="large">
                            <el-option v-for="item in userList" :key="item.userId" :label="item.nickName"
                                :value="item.userId" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="设计师昵称" prop="designerName">
                        <el-input v-model="editPlannerForm.designerName"
                            @focus="editPlannerFormLimit.designerNameLimit = true"
                            @blur="editPlannerFormLimit.designerNameLimit = false"
                            :show-word-limit="editPlannerFormLimit.designerNameLimit" maxlength="30"
                            placeholder="请输入设计师昵称" />
                    </el-form-item>
                    <!-- <el-form-item label="性别" prop="gender">
                        <el-select v-model="editPlannerForm.gender" placeholder="请选择" size="large">
                            <el-option label="男" value="0" />
                            <el-option label="女" value="1" />
                            <el-option label="未知" value="2" />
                        </el-select>
                    </el-form-item> -->
                    <el-form-item label="机构（如无从属机构，请先入驻设计机构）" prop="organizationId">
                        <el-select v-model="editPlannerForm.organizationId" filterable placeholder="请选择机构" size="large">
                            <el-option v-for="item in InstitutionSelList" :key="item.organizationId"
                                :label="item.organizationName" :value="item.organizationId" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="职位" prop="position">
                        <el-select v-model="editPlannerForm.position" filterable placeholder="请选择机构" size="large">
                            <el-option v-for="item in positionSelList" :key="item.positionId" :label="item.name"
                                :value="item.name" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="工作年限" prop="workYears">
                        <el-select v-model="editPlannerForm.workYears" placeholder="请选择工作年限" size="large">
                            <el-option label="0~1年" value="0~1年" />
                            <el-option label="1~3年" value="1~3年" />
                            <el-option label="3~5年" value="3~5年" />
                            <el-option label="5~10年" value="5~10年" />
                            <el-option label="10年以上" value="10年以上" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="授权手机号" prop="tel">
                        <el-input disabled v-model="editPlannerForm.tel" placeholder="请输入授权手机号" />
                    </el-form-item>
                    <el-form-item label="个人简介" prop="personalProfile">
                        <el-input type="textarea" :autosize="{ minRows: 5 }" v-model="editPlannerForm.personalProfile"
                            placeholder="请输入个人简介" @focus="introduceLimit = true" @blur="introduceLimit = false"
                            :show-word-limit="introduceLimit" maxlength="500" />
                    </el-form-item>
                    <!-- <el-form-item label="服务地区" prop="serviceAddress">
                        <el-input v-model="form.serviceAddress" @focus="editDesignerFormLimit.serviceAddressLimit = true"
                            @blur="editDesignerFormLimit.serviceAddressLimit = false"
                            :show-word-limit="editDesignerFormLimit.serviceAddressLimit" maxlength="15"
                            placeholder="请输入服务地区" />
                    </el-form-item> -->
                </div>
                <div class="form-right">
                    <el-form-item label="头像" prop="avatarId">
                        <image-upload v-model="editPlannerForm.avatarId" :limit="1" />
                    </el-form-item>
                    <el-form-item label="形象照" prop="coverImage">
                        <image-upload v-model="editPlannerForm.coverImage" :limit="1" />
                    </el-form-item>
                    <el-form-item label="名片背景" prop="hairstyle">
                        <image-upload v-model="editPlannerForm.hairstyle" :limit="1" />
                    </el-form-item>
                    <el-form-item label="所获荣誉" prop="honers">
                        <el-input type="textarea" :autosize="{ minRows: 3 }" v-model="editPlannerForm.honers"
                            @focus="editPlannerFormLimit.honersLimitLimit = true"
                            @blur="editPlannerFormLimit.honersLimitLimit = false"
                            :show-word-limit="editPlannerFormLimit.honersLimitLimit" maxlength="500"
                            placeholder="请输入荣誉" />
                    </el-form-item>
                    <el-form-item label="荣誉证书：" prop="honersImgs">
                        <image-upload v-model="editPlannerForm.honersImgs" :limit="3" />
                    </el-form-item>
                    <el-form-item label="点赞量：" prop="likes">
                        <el-input-number controls-position="right" size="large" style="width:100%;"
                            v-model="editPlannerForm.likes" :step="1" :min="0" :max="999999999999" />
                    </el-form-item>
                    <el-form-item label="访问量：" prop="visits">
                        <el-input-number controls-position="right" size="large" style="width:100%;"
                            v-model="editPlannerForm.visits" :step="1" :min="0" :max="999999999999" />
                    </el-form-item>
                    <el-form-item label="排序：" prop="sort1">
                        <el-input-number controls-position="right" size="large" style="width:100%;"
                            v-model="editPlannerForm.sort1" :step="1" :min="1" :max="9999" />
                    </el-form-item>
                </div>
            </el-form>
        </div>
        <div class="platform-submit-btn">
            <el-button type="primary" @click="submitForm">提交</el-button>
            <el-button class="default-btn" @click="cancel">返回</el-button>
        </div>
    </div>
</template>
<script setup>
import { getDesigner, addDesigner, updateDesigner, getInstitutionSelList, getDesignerNameSel, getPositionSelList } from "@/api/decor/designer";
const { proxy } = getCurrentInstance();
const router = useRouter();
const route = useRoute();
const introduceLimit = ref(false)
const activeNames = ref(['1'])
// 职位的下拉框
const positionSelList = ref([])
const data = reactive({
    editPlannerForm: {},
    editPlannerFormLimit: {
        designerNameLimit: false,
        companyLimit: false,
        positionLimit: false,
        personalProfileLimit: false,
        honersLimitLimit: false,
        // serviceAddressLimit: false,
    },
    rules: {
        designerName: [
            { required: true, message: "设计师昵称不能为空", trigger: "blur" }
        ],
        tel: [
            { required: true, message: "授权手机号不能为空", trigger: "blur" },
            {
                pattern: /^1[3|4|5|6|7|8|9]\d{9}$/,
                message: "请输入正确的授权手机号",
                trigger: "change",
            },
        ],
        position: [
            { required: true, message: "职位不能为空", trigger: "blur" }
        ],
        avatarId: [
            { required: true, message: "请上传头像", trigger: "blur" }
        ],
        coverImage: [{ required: true, message: "请上传封面图", trigger: "blur" }],
        organizationId: [{ required: true, message: "机构不能为空", trigger: "blur" }],
        workYears: [{ required: true, message: "工作年限不能为空", trigger: "blur" }],
        level: [{ required: true, message: "设计等级不能为空", trigger: "blur" }],
        // serviceAddress: [{ required: true, message: "服务地区不能为空", trigger: "blur" }]
    }
});
// 等级
const level = ref([
    { id: 0, label: '青铜设计师' },
    { id: 1, label: '白银设计师' },
    { id: 2, label: '黄金设计师' },
    { id: 3, label: '铂金设计师' },
    { id: 4, label: '钻石设计师' },
])
let InstitutionSelList = ref([])
let userList = ref([])
const { editPlannerForm, editPlannerFormLimit, rules } = toRefs(data);
// 获取机构+职位 下拉框数据
const getSel = () => {
    getInstitutionSelList().then((res) => {
        res.rows.forEach((v) => {
            InstitutionSelList.value.push({ organizationId: v.organizationId, organizationName: v.organizationName })
        })
    })
    getPositionSelList().then((res) => {
        positionSelList.value = res.data
    })

}
// 查询用户列表
const getList = () => {
    getDesignerNameSel({ orderByColumn: 'sysUser.userId', isAsc: 'desc' }).then(res => {
        userList.value = res.rows;
    });
};
// 设计师昵称发生改变的时候
const designerNameChange = (userId) => {
    // 根据id查询对应的用户详细信息 
    const detail = userList.value.find((item) => item.userId === userId)
    if (detail) {
        editPlannerForm.value = {
            tel: detail.phonenumber,
            // gender: detail.gender,
            personalProfile: detail.remark,
            designerName: detail.nickName,
            userId: detail.userId,
            nickName: detail.nickName,
        }
    }

}
// 获取设计师详情信息
(() => {
    const designerId = route.params.designerId
    if (designerId) {
        getDesigner(designerId).then((res) => {
            editPlannerForm.value = res.data
            editPlannerForm.value.nickName = res.data.designerName
        })
    }
})()
const submitForm = () => {
    proxy.$refs["designerRef"].validate(valid => {
        if (valid) {
            if (editPlannerForm.value.designerId != null) {
                updateDesigner(editPlannerForm.value).then(response => {
                    proxy.$modal.msgSuccess("修改成功");
                    router.go(-1)
                });
            } else {
                addDesigner(editPlannerForm.value).then(response => {
                    proxy.$modal.msgSuccess("新增成功");
                    router.go(-1)
                });
            }
        } else {
            proxy.$modal.msgError('请根据提示完善必填信息')
        }
    });
}
// 返回
const cancel = () => {
    router.go(-1)
}
getList()
getSel()
</script>
<style lang="scss" scoped>
.header {
    display: flex;
    align-items: center;
    justify-content: center;

    .header-warn {
        font-family: NotoSansHans, NotoSansHans;
        font-weight: 400;
        font-size: 14px;
        color: #ACB3BD;
        line-height: 21px;
        text-align: right;
        font-style: normal;
        margin-left: 20px;
    }
}
</style>